<template>
	<view class="page">
		<cu-custom bgColor="bg-gradual-blue" :isBack="false">
			<block slot="backText">返回</block>
			<block slot="content">搜索</block>
		</cu-custom>

		<view class="cu-bar bg-white search fixed" :style="[{top:CustomBar + 'px'}]">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input type="text" placeholder="输入电影名称..." confirm-type="search" focus @confirm="searchMovie()"></input>
			</view>
			<!-- <view class="action">
				<button class="cu-btn bg-gradual-blue shadow-blur round">搜索</button>
			</view> -->
		</view>

		<!-- 电影列表 start -->
		<view class="page-block movie-list">
			<view class="movie-wrapper" v-for="movie in searchMovieList" :data-movieid="movie.id" @click="showMovie">
				<image class="poster" :src="movie.poster"></image>
				<view class="movie-name">{{movie.name}}</view>
				<view class="movie-actors">{{movie.actors}}</view>
			</view>
		</view>
		<!-- 电影列表 end -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				searchMovieList: [{"id":1,"name":"速度与激情9","poster":"https://www.yugaopian.cn/files/mpic/201610/p18050.jpg","playurls":"","status":"预告","type":"动作 / 犯罪","years":2021,"region":"美国","language":"英语 中文字幕","director":"林诣彬","actors":"范·迪塞尔 / 约翰·塞纳 / 米歇尔·罗德里格兹 / 乔丹娜·布鲁斯特","plot":"故事发生在《速度与激情8》的两年后，唐老大将要对付与昔日的敌人塞弗合作的弟弟雅各。","score":9.5,"comments":520,"addtime":"2021-05-15T00:05:03.000+0000"},{"id":2,"name":"柳青","poster":"https://www.yugaopian.cn/files/mpic/202105/p31795.jpg","playurls":"https://vod.pipi.cn/43903a81vodtransgzp1251246104/9a8b034e5285890818335736026/v.f42905.mp4","status":"预告","type":"剧情 / 传记 / 历史","years":2021,"region":"中国大陆","language":"中文","director":"田波","actors":"成泰燊 / 丹琳 / 师清峰 / 卢学习","plot":"影片真实再现了五十六年代，新中国百废待兴，全国开展了轰轰烈烈的社会主义农村合作化运动。青年作家柳青辞掉北京优渥的干部待遇，他决心亲自参与实践，创作一部反映社会主义人民集体创业的史诗巨著。柳青举家落户在皇甫村的一所破庙里，他深入农村建设一线，扎根人民十四年，历经各种运动，面对农业合作社建设的各种困境，他铁肩担道义，和农民一起开辟了社会主义事业在农村的新局面，在各种困境中创作出《创业史》第一部，一经发表，轰动全国。就在他雄心勃勃展开第二部创作时，一场更大的风暴席卷而来，面对人生的磨难，他不忘初心，最终用一生书写了一段艰苦卓绝的社会主义创业史。","score":8.5,"comments":0,"addtime":"2021-05-15T00:05:03.000+0000"},{"id":3,"name":"再见汪先森","poster":"https://www.yugaopian.cn/files/mpic/202104/p31596.jpg","playurls":"","status":"预告","type":"喜剧 / 爱情 / 奇幻","years":2021,"region":"中国大陆","language":"中文","director":"王大治","actors":"萧子墨 / 张国强 / 吕晓霖 / 柴碧云","plot":"12岁的腊肠犬“江米条”在帮主人方一一挽留爱情时挺身而出，却意外离世来到汪星世界，在这里要做的第一件事就是忘却前尘，这就意味着他将不再记起和方一一的点点滴滴，也许记忆可以重置，但爱着方一一的本能经年难忘，江米条奋力反抗冲破阻拦，历经艰险重返人间，穿越茫茫人海，用另一种方式陪伴在方一一身边，在生命的最后一刻，倾尽全力护她周全，用两生两世的温柔全心全意地守护他最爱的方一一。","score":7.5,"comments":0,"addtime":"2021-05-15T00:05:03.000+0000"},{"id":4,"name":"你好世界","poster":"https://www.yugaopian.cn/files/mpic/202104/p31736.jpg","playurls":"","status":"预告","type":"爱情 / 动画 / 奇幻","years":2021,"region":"日本","language":"日语 中文字幕","director":"伊藤智彦","actors":"北村匠海 / 松坂桃李 / 滨边美波 / 子安武人","plot":"为了拯救爱人，16岁的直实卷入了这场现实与虚拟的记忆世界，经历了一系列超乎想象的事情。即使世界毁灭，我也想再见你一面。","score":6.5,"comments":0,"addtime":"2021-05-15T00:05:03.000+0000"}],
				keywords: '',	//搜索关键词
				page: 1, //当前页
				totalPages: 1 //总页数
			}
		},
		onLoad() {
			var me = this;
			var serverUrl = me.serverUrl;

			uni.showLoading({
				mask: true,
				title: '请稍候...'
			});

			// 请求搜索电影数据
			uni.request({
				url: serverUrl + '/index/movie/hot?type=4',
				method: 'GET',
				success: (res) => {
					if (res.data.status == 200) {
						me.searchMovieList = res.data.data;
					}
				},
				complete: () => {
					uni.hideLoading();
				}
			});
		},
		onReachBottom() {
			var me = this;

			var keywords = me.keywords;
			var page = me.page + 1;
			var totalPages = me.totalPages;
			// if (page > totalPages) {
			// 	return;
			// }

			me.pagedMovieList(keywords, page, 15);
		},
		methods: {
			showMovie(e) {
				var movieId = e.currentTarget.dataset.movieid;
				uni.navigateTo({
					url: '../movie/movie?movieId=' + movieId
				})
			},
			pagedMovieList(keywords, page, pageSize) {
				var me = this;
				var serverUrl = me.serverUrl;

				uni.showLoading({
					mask: true,
					title: '正在加载...'
				});

				// 请求搜索电影数据
				uni.request({
					url: serverUrl + '/index/movie/hot',
					data: {
						'keywords': keywords,
						'page': page,
						'pageSize': pageSize
					},
					method: 'GET',
					success: (res) => {
						if (res.data.status == 200) {
							var tempList = res.data.data;
							me.searchMovieList = me.searchMovieList.concat(tempList);
							// me.page = res.data.data.pageNumber;
							// me.totalPages = res.data.data.pages;
						}
					},
					complete: () => {
						uni.hideLoading();
					}
				});
			},
			searchMovie(e) {
				var me = this;
				// 获取搜索框的值
				var value = e.detail.value;
				me.keywords = value;
				me.searchMovieList = [];

				me.pagedMovieList(value, 1, 15);
			}
		}
	}
</script>

<style>
	.movie-list {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		flex-wrap: wrap;
		padding: 110upx 10upx 0;
	}

	.movie-wrapper {
		display: flex;
		flex-direction: column;
		padding: 10upx 20upx;
	}

	.poster {
		width: 200upx;
		height: 270upx;
	}

	.movie-name {
		width: 200upx;
		margin-top: 10upx;
		font-size: 14px;
		text-align: center;
		/* 超出省略 */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.movie-actors {
		width: 200upx;
		color: #808080;
		font-size: 12px;
		text-align: center;
		/* 超出省略 */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>
